<template>
  <div class="inOutCommoditiesCon">
    <div class="inOutCommodities active">
      <img class="inOutCommoditiesImg" src="../../../../static/img/kind_show_selected.png" />
      <div class="inOutCommoditiesTxt">
        <span>1</span>
        <span>化妆品</span>
      </div>
      <div class="inOutCommoditiesTip">
        <img src="../../../../static/img/hover_bg.png" />
        <div>单量：<span>7558包</span></div>
      </div>
    </div>
    <div class="inOutCommodities">
      <img class="inOutCommoditiesImg" src="../../../../static/img/kind_show.png" />
      <div class="inOutCommoditiesTxt">
        <span>2</span>
        <span>化妆品</span>
      </div>
       <div class="inOutCommoditiesTip">
        <img src="../../../../static/img/hover_bg.png" />
        <div>单量：<span>7558包</span></div>
      </div>
    </div>
    <div class="inOutCommodities">
      <img class="inOutCommoditiesImg" src="../../../../static/img/kind_show.png" />
      <div class="inOutCommoditiesTxt">
        <span>3</span>
        <span>化妆品</span>
      </div>
       <div class="inOutCommoditiesTip">
        <img src="../../../../static/img/hover_bg.png" />
        <div>单量：<span>7558包</span></div>
      </div>
    </div>
    <div class="inOutCommodities">
      <img class="inOutCommoditiesImg" src="../../../../static/img/kind_show.png" />
      <div class="inOutCommoditiesTxt">
        <span>4</span>
        <span>化妆品</span>
      </div>
       <div class="inOutCommoditiesTip">
        <img src="../../../../static/img/hover_bg.png" />
        <div>单量：<span>7558包</span></div>
      </div>
    </div>
    <div class="inOutCommodities">
      <img class="inOutCommoditiesImg" src="../../../../static/img/kind_show.png" />
      <div class="inOutCommoditiesTxt">
        <span>5</span>
        <span>化妆品</span>
      </div>
       <div class="inOutCommoditiesTip">
        <img src="../../../../static/img/hover_bg.png" />
        <div>单量：<span>7558包</span></div>
      </div>
    </div>
    <div class="inOutCommodities">
      <img class="inOutCommoditiesImg" src="../../../../static/img/kind_show.png" />
      <div class="inOutCommoditiesTxt">
        <span >6</span>
        <span>化妆品</span>
      </div>
       <div class="inOutCommoditiesTip">
        <img src="../../../../static/img/hover_bg.png" />
        <div>单量：<span>7558包</span></div>
      </div>
    </div>
    <div class="inOutCommodities">
      <img class="inOutCommoditiesImg" src="../../../../static/img/kind_show.png" />
      <div class="inOutCommoditiesTxt">
        <span >7</span>
        <span>化妆品</span>
      </div>
       <div class="inOutCommoditiesTip">
        <img src="../../../../static/img/hover_bg.png" />
        <div>单量：<span>7558包</span></div>
      </div>
    </div>
    <div class="inOutCommodities">
      <img class="inOutCommoditiesImg" src="../../../../static/img/kind_show.png" />
      <div class="inOutCommoditiesTxt">
        <span>8</span>
        <span>化妆品</span>
      </div>
       <div class="inOutCommoditiesTip">
        <img src="../../../../static/img/hover_bg.png" />
        <div>单量：<span>7558包</span></div>
      </div>
    </div>

  </div>

</template>

<script>
	export default {
		name: 'inOutCommodities',
		components: {

		},
		data() {
			return {

			}
		},
		mounted() {
			this.getEchartData()
		},
		methods: {
			getEchartData() {
				const inOutCommodities = this.$refs.inOutCommodities;
				if(inOutCommodities) {
					const myChart = this.$echarts.init(inOutCommodities)

					const option = {};
					myChart.setOption(option)
					window.addEventListener("resize", function() {
						myChart.resize()
					})
				}
			},

		}
	}
</script>

<style>
	.inOutCommoditiesCon{
    width: 90%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  .inOutCommodities{
    width:25% ;
    height: 45%;
    position: relative;
    margin-bottom: 5%;
  }
  .inOutCommoditiesTxt{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #fff;
    flex-direction: column;
  }
  .inOutCommoditiesTxt>span:nth-of-type(1){
    font-size: .16rem;
    line-height: .4rem;
    margin-top: -.1rem;
  }
  .inOutCommoditiesTxt>span:nth-of-type(2){
    font-size: .14rem;
  }
  .inOutCommoditiesImg{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
  }
  .inOutCommoditiesTip{
    width: 1rem;
    height: .24rem;
    position: absolute;
    left: 0;
    bottom:  -.22rem;
    right: 0;
    margin: 0 auto;

  }
  .inOutCommoditiesTip>div{
    position: absolute;
    top: 0;
    left: 0;
    bottom:0;
    right: 0;
    margin:auto;
    color: #fff;
    font-size: .12rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .inOutCommoditiesTip>img{
    width: 100%;
    height: 100%;
  }
  .inOutCommoditiesTip>div>span{
    color: #5efffb;
    font-size: .12rem;
  }

</style>
